<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Beeeeeer!</title>
<script type="text/javascript" src="/Beeer/script/jquery.js"></script>
<script type="text/javascript">
var flag;
$(document).ready(function(){
	$("#id").on("focus", function(){
			$("#id").val("").css("color", "black");
	});
	
	var id = $("#id").val();
	if(id.length>=6){
		$("#id").on("keyup", function(){
			//로그인(id, pw) 체크
			$.ajax({
				type: "POST",
				url: "/Beeer/member/login_check.do",
				data: {"id":$("#id").val("")},
				dataType: "JSON",
				beforeSend:function(){},
				success:function(msg){
					alert(msg);
				},
				error:function(){
					alert(xhr.status+"-"+xhr.statusText);
				}	
			});	
	});
	}
	
	$("#password").on("focus", function(){
		$("#password").val("").css("color", "black");
	});
});
		

</script>
<style type="text/css">
body{
	height: 100%;
	background-image: url("/Beeer/image_for_UI/bgimage.jpg");
	background-repeat  : no-repeat;
	background-size: 100%;
}
table tr td{
	text-align: center;
}

#main{
	margin-top:5%;
	/*margin-left:40%;*/
}
#main tr td{
	padding: 10px;
}
#login{
	margin-top: 5%;
}
#links{
	margin-top: 3%;
}
#beeer{
	font-family: verdana;
	font-size: 80px;
	font-weight: bold;
	color: gold;
}
#exp{
	font-size: 20px;
	font-weight: bold;
	color: DimGray ;
}
.input_layer{
	display: block;
	width: 200px;
	height: 30px;
	font-size: 20px;
	color: gray;
	/*background-color: transparent;*/ /*입력창을 투명하게*/
}

#submit{
	width: 200px;
	height: 50px;
}
#link_to_join, #link_to_search{
	width: 300px;
	height: 50px;
	margin-left: 10px;
	/*background-color: yellow;*/
	font-size: 20px;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
}
a{
	font-family: Verdana;
	font-weight: bold;
	text-decoration: none;
	color: black;
}
.menu:hover{
	color: Green  ;
}

</style>
</head>
<body>
<center>
<table id="main">
	<tr id="beeer">
		<td colspan="3">Beeeeer!</td>
	</tr>
	<tr id="exp">
		<td colspan="3">세계 각국의 맥주를 평가하고, <br>친구들과 맥주 모임 일정을 공유하세요!
		</td>
	</tr>
</table>

<!-- 로그인 정보 입력 table -->
<form action="${initParam.rootPath }/member/login.do" method="post">
<table id="login">
	<tr>
		<td>
			<input type="text" id="id" class="input_layer" name="id" value="아이디" maxlength="15">
		</td>
		<td id="login_id_msg">
		</td>
	</tr>
	<tr>
		<td>
			<input type="password" id="password" name="password" value="비밀번호" class="input_layer" maxlength="15">
		</td>
		<td id="login_pw_msg">
		</td>
	</tr>
	<tr>
		<td>
			<input type="image" id="submit" src="${initParam.rootPath }/image_for_UI/loginButton.jpg" >
		</td>
	</tr>
</table>
</form>

<table id="links">
	<tr>
		<td>
			<a id="link1" class="menu" href="${initParam.rootPath }/member/search.do">
				<div id="link_to_search">세계 맥주 둘러보기</div>
			</a>
		</td>
		<td>
			<a id="link2" class="menu" href="${initParam.rootPath }/member/join_form.do">
				<div id="link_to_join">10초만에 가입하기</div>
			</a>
		</td>
	</tr>
</table>


</center>
</body>
</html>